<template>
  <el-card shadow="hover" class="product-info">
    <template #header>报警和异常</template>
    <div class="info">
      <div class="info-item">
        <div class="info-label">报警信息</div>
        <div class="info-value"><countTo :startVal="0" :endVal="3" :duration="2000" /></div>
      </div>
      <div class="info-item">
        <div class="info-label">异常事件记录</div>
        <div class="info-value"><countTo :startVal="0" :endVal="3" :duration="2000" /></div>
      </div>
    </div>
    <el-divider content-position="left">异常记录</el-divider>
    <el-scrollbar max-height="30vh" class="timeline-container">
      <el-timeline>
        <el-timeline-item
          v-for="(event, index) in displayedEvents"
          :key="index"
          :timestamp="event.timestamp"
          placement="top"
          :color="event.color"
        >
          <el-card shadow="always" class="timeline-card">
            <div class="event-header">
              <el-icon class="event-icon"><component :is="event.icon" /></el-icon>
              <div class="event-title">{{ event.title }}</div>
            </div>
            <div class="event-detail">{{ event.detail }}</div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>
  </el-card>
</template>
<script setup>
import { CountTo } from 'vue3-count-to'
import { ref } from 'vue'
import 'element-plus/es/components/icon/style/css'

const events = ref([
  { timestamp: '2023-07-20', title: '	注塑机#2', detail: '传送带停转', icon: 'WarningFilled', color: '#424243' },
  { timestamp: '2023-07-21', title: '激光焊接机', detail: '超负荷运转', icon: 'WarningFilled', color: '#CFD3DC' },
  { timestamp: '2023-07-22', title: '波峰焊机', detail: '线路短路', icon: 'CircleCloseFilled', color: '#CFD3DC' }
  // 更多的异常事件记录...
])

const displayedEvents = ref(events.value.slice())
</script>
<style scoped>
.product-info {
  background-color: #ffffff;
  color: #000000;
}

.info {
  display: flex;
  justify-content: space-between;
}

.info-item {
  flex: 1;
  text-align: center;
  margin-right: 20px;
}

.info-item:last-child {
  margin-right: 0;
}

.info-label {
  font-size: 14px;
  margin-bottom: 10px;
}

.info-value {
  font-size: 24px;
  font-weight: bold;
}

.timeline-container {
  margin-top: 20px;
  margin-left: -30px; /* 将时间线整体向左移动10px */
}

.timeline-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.event-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.event-icon {
  font-size: 20px;
  margin-right: 10px;
}

.event-title {
  font-weight: bold;
  font-size: 16px;
}

.event-detail {
  font-size: 14px;
  color: #666;
}

.el-button {
  margin: 0 10px;
}
</style>
